<template>
  <div class="table-pagination-wrapper">
    <div class="filter-wrapper">
      <el-form :inline="true" :model="formModel" ref="formInsRef" :rules="rules">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="formModel.title" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="HTML关键字" prop="html">
          <el-input v-model="formModel.html" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="MD关键字" prop="markdown">
          <el-input v-model="formModel.markdown" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item>
          <el-button @click="onReset">重 置</el-button>
          <el-button type="primary" @click="onSubmit">查 询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="action-wrapper">
      <el-button type="primary" @click="eventHandler('ADD')">新增</el-button>
    </div>
    <div class="table-wrapper" v-loading="loading">
      <el-table :data="tableData" stripe border style="width: 100%" max-height="calc(100% - 56px)">
        <el-table-column
          prop="title"
          label="文章标题"
          class-name="class-name-common-wrapper"
          :show-overflow-tooltip="false"
          :tooltip-options="{ 'popper-class': 'popper-class-common-wrapper', trigger: 'click' }"
        />
        <el-table-column
          prop="html"
          label="HTML"
          class-name="class-name-common-wrapper"
          :show-overflow-tooltip="false"
          :tooltip-options="{ 'popper-class': 'popper-class-common-wrapper', trigger: 'click' }"
        />
        <el-table-column
          prop="markdown"
          label="MD"
          class-name="class-name-common-wrapper"
          :show-overflow-tooltip="false"
          :tooltip-options="{ 'popper-class': 'popper-class-common-wrapper', trigger: 'click' }"
        />
        <el-table-column prop="picture" label="封面图">
          <template #default="scope">
            <img style="width: 60px; height: 60px" :src="scope.row.picture" />
            <!-- <span v-else>--</span> -->
          </template>
        </el-table-column>
        <el-table-column prop="category" label="文章类别">
          <template #default="scope">
            <RenderDict tag :value="scope.row.category" />
          </template>
        </el-table-column>
        <el-table-column prop="tag" label="文章标签">
          <template #default="scope">
            <RenderDict tag :value="scope.row.tag" />
          </template>
        </el-table-column>
        <el-table-column prop="order" label="排序" />
        <el-table-column fixed="right" label="操作" width="140">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="eventHandler('DETAIL', row)">详情</el-button>
            <el-button link type="primary" size="small" @click="eventHandler('EDIT', row)">编辑</el-button>
            <el-popconfirm title="确认要删除改行记录吗?" width="200" @confirm="eventHandler('DELETE', row)">
              <template #reference>
                <el-button link type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :page-sizes="pagination.sizes"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChangeHandler"
          @current-change="handleCurrentChangeHandler"
        />
      </div>
    </div>
  </div>
</template>

<script lang="js" setup>
import { ref, onMounted, reactive } from "vue"
import { articleDeleteApi, articleApi } from "@/api/article"
import { delayFn } from "@/utils"
import { ROLE_OBJ_ENUMS } from "./const"
import { ElMessage } from "element-plus"
import { useRouter } from "vue-router"

const router = useRouter()

const formInsRef = ref()
const validateFn = (rule, value, callback) => {
  callback()
}
const rules = reactive({
  title: [{ validator: validateFn }],
  html: [{ validator: validateFn }],
  markdown: [{ validator: validateFn }],
})
const formModel = reactive({
  title: "",
  html: "",
  markdown: "",
})

const pagination = ref({
  size: 20,
  page: 1,
  total: 0,
  sizes: [10, 20, 50, 100, 200, 300, 400],
})
const loading = ref(false)
const tableData = ref([])

const init = async () => {
  if (loading.value) {
    return
  }
  loading.value = true
  try {
    const res = await articleApi(
      { ...formModel },
      {
        page: pagination.value.page,
        size: pagination.value.size,
      },
    )
    const { count = 0, rows = [] } = res || {}
    pagination.value.total = count
    tableData.value = rows
  } catch (error) { }
  await delayFn()
  loading.value = false
}

const handleSizeChangeHandler = size => {
  pagination.value.page = 1
  pagination.value.size = size
  init()
}

const handleCurrentChangeHandler = page => {
  pagination.value.page = page
  init()
}

const reset = () => {
  Object.assign(pagination.value, { page: 1, size: 20 })
}

const deleteHandler = async row => {
  await articleDeleteApi(row?.id)
  ElMessage.success("操作成功")
  init()
}

const eventHandler = async (action, row) => {
  switch (action) {
    case "ADD":
      router.push({ path: "create" })
      break
    case "DETAIL":
      router.push({ path: `detail/${row.id}` })
      break
    case "EDIT":
      router.push({ path: `edit/${row.id}` })
      break
    case "DELETE":
      deleteHandler(row)
      break
    default:
  }
}

const onSubmit = () => {
  console.log("submit!")
  init()
}
const onReset = () => {
  if (!formInsRef.value) return
  formInsRef.value?.resetFields()
  init()
}

onMounted(() => {
  reset()
  init()
})
</script>

<style lang="less" scoped>
.table-pagination-wrapper {
  height: 100%;
  box-sizing: border-box;

  .action-wrapper {
    height: 56px;
    display: flex;
    align-items: center;
  }

  .filter-wrapper {
  }

  .table-wrapper {
    // height: calc(100% - 56px);
  }

  .pagination-wrapper {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
